import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import {
  Card,
  Row,
  Col,
  Tree,
  Tag,
  Pagination,
  Table,
  Button,
  message,
} from 'antd'
import type { TreeProps } from 'antd/es/tree'
import type { ColumnsType } from 'antd/es/table'
import {
  reqGetDepList,
  reqGetScheduleRules,
  reqGetScheduleRulesDetail,
} from '@api/hospitalList'
import {
  IdepList,
  IbookingScheduleList,
  IscheduleDetailList,
  IscheduleDetail,
} from '@api/hospitalList/model/hospitalListTypes'

export default function HospitalListRules() {
  const { hoscode } = useParams()
  // 存储科室数据
  const [depList, setDepList] = useState<IdepList>([])
  // 存储所有一级科室的depcode
  const [depCodes, setDepCodes] = useState<string[]>([])
  // 选中的科室的depcode
  const [depcode, setDepCode] = useState('')

  // 排班规则分页状态
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState(0)

  // 面包屑的三个状态
  const [hosname, setHosname] = useState('')
  const [depname, setDepname] = useState('')
  const [workDate, setWorkDate] = useState('')

  // 排班规则数据
  const [bookingScheduleList, setBookingScheduleList] =
    useState<IbookingScheduleList>([])

  // 排班详情数据
  const [scheduleDetail, setScheduleDetail] = useState<IscheduleDetailList>([])

  useEffect(() => {
    // 组件挂载获取所有科室数据
    getDepList()
  }, [])
  //获取当前医院所有科室数据函数
  async function getDepList() {
    const result = await reqGetDepList(hoscode as string)
    // 遍历result,往每一个一级科室数据中添加disabled:true这段数据,让一级科室禁用
    result.forEach((item) => {
      item.disabled = true
    })
    // 找到第一个一级科室的第一个二级科室的编码
    let depcode = result[0].children[0].depcode
    setDepCode(depcode)

    //找到第一个一级科室的第一个二级科室的名称
    let depname = result[0].children[0].depname
    setDepname(depname)

    // 获取排班规则
    // 注意:因为只有获取到了科室数据,才知道要获取哪个科室的排班规则.所以一定要再科室数据获取完毕之后,获取排班规则
    getScheduleRules(page, pageSize, depcode)
    // 根据已有的所有科室数据,进行遍历,将一级科室数据单独拿出来,存储到一个新数组中
    const codes = result.map((item) => item.depcode)
    setDepCodes(codes)
    setDepList(result)
  }
  // 获取排班规则的函数
  async function getScheduleRules(
    page: number,
    pageSize: number,
    depcode: string
  ) {
    const result = await reqGetScheduleRules(
      page,
      pageSize,
      hoscode as string,
      depcode
    )

    // 判断是否有排班规则数据,如果没有则直接return
    if (!result.bookingScheduleList.length) {
      // 提示用户
      message.error('当前科室暂无数据')
      // 清空表格的数据
      setScheduleDetail([])
      setBookingScheduleList([])
      setTotal(0)
      setWorkDate('')
      return
    }

    setBookingScheduleList(result.bookingScheduleList)
    setTotal(result.total)
    setHosname(result.baseMap.hosname)
    // 找到第一个排班规则
    let workDate = result.bookingScheduleList[0]?.workDate
    setWorkDate(workDate)

    // 获取排班规则详情数据
    getScheduleDetail(depcode, workDate)
  }

  // 获取排班规则详情数据的函数
  async function getScheduleDetail(depcode: string, workDate: string) {
    const result = await reqGetScheduleRulesDetail(
      hoscode as string,
      depcode,
      workDate
    )
    setScheduleDetail(result)
  }

  // 表格列配置数据
  const columns: ColumnsType<IscheduleDetail> = [
    {
      title: '序号',
      render(_, records, index) {
        return index + 1
      },
      align: 'center',
      width: 80,
    },
    {
      title: '职称',
      dataIndex: 'title',
    },
    {
      title: '号源时间',
      dataIndex: 'workDate',
    },
    {
      title: '可预约数',
      dataIndex: 'availableNumber',
    },
    {
      title: '剩余预约数',
      dataIndex: 'reservedNumber',
    },
    {
      title: '挂号费(元)',
      dataIndex: 'amount',
    },
    {
      title: '擅长技能',
      dataIndex: 'skill',
    },
  ]

  // 点击Tag的事件处理函数
  const tagHandle = (workDate: string) => () => {
    // 修改面包屑
    setWorkDate(workDate)
    // 获取表格数据进行渲染
    getScheduleDetail(depcode, workDate)
  }

  const onSelect: TreeProps['onSelect'] = (selectedKeys, info: any) => {
    console.log('selected', selectedKeys, info)
    // 1. 修改面包屑科室名称
    setDepname(info.node.depname)
    // 2. 获取排班规则数据
    const depcode = selectedKeys[0] as string
    getScheduleRules(1, pageSize, depcode)
    setPage(1)
    setDepCode(depcode)
  }

  return (
    <Card>
      <p>
        选择：{hosname} / {depname} / {workDate}
      </p>
      {/* Row和Col是antd中提供的栅格系统布局组件. Row代表一行.Col代表一列 */}
      {/* gutter控制栅格系统中每一列的间隔距离.单位是px */}
      <Row gutter={20}>
        <Col
          style={{ border: '1px solid #ccc', height: 500, overflow: 'scroll' }}
          span={5}
        >
          <Tree
            // checkable={true} // 是否展示复选框
            //默认展开的节点的key值
            // 注意: default开头的属性,只在第一次赋值的时候生效
            // defaultExpandedKeys={depCodes}
            expandedKeys={depCodes}
            // 默认选中的节点的key值
            // defaultSelectedKeys={['200040878']}
            selectedKeys={[depcode]}
            // 默认复选框被选中的key值
            // defaultCheckedKeys={['0-0-0', '0-0-1']}
            // 点击了节点的事件
            onSelect={onSelect}
            // 点击了复选框的事件
            // onCheck={onCheck}
            // 树形组件中要展示的数据
            treeData={depList as any}
            // Tree组件默认渲染数据中的title和key属性.但是我们请求回来的数据没有title和key
            // 所以通过fieldsName进行配置,告诉Tree组件,把depname当做title,把depcode当做key渲染
            fieldNames={{
              title: 'depname',
              key: 'depcode',
            }}
          />
        </Col>
        <Col span={19}>
          {bookingScheduleList.map((item) => (
            <Tag
              color={workDate === item.workDate ? 'green' : ''}
              key={item.workDate}
              style={{ marginBottom: 20 }}
              onClick={tagHandle(item.workDate)}
            >
              <div>
                {item.workDate} {item.dayOfWeek}
              </div>
              <div>
                {item.availableNumber} / {item.reservedNumber}
              </div>
            </Tag>
          ))}

          <Pagination
            current={page}
            pageSize={pageSize}
            total={total}
            showSizeChanger={true}
            pageSizeOptions={[2, 5, 10]}
            onChange={(page, pageSize) => {
              setPage(page)
              setPageSize(pageSize)
              // 获取排班规则
              getScheduleRules(page, pageSize, depcode)
            }}
          ></Pagination>

          <Table
            rowKey={'id'}
            className="gap"
            columns={columns}
            dataSource={scheduleDetail}
            // 表格不展示分页器,设置为false
            pagination={false}
          ></Table>

          <Button className="gap">返回</Button>
        </Col>
      </Row>
    </Card>
  )
}
